<template>
	<div class="line-check">
		<el-form :inline="true" :model="checkForm" ref="checkForm" class="demo-form-inline">
			<el-form-item label="分公司" v-if="isHead">
				<el-select v-if="isHead" v-model="checkForm.branch" filterable clearable placeholder="分公司" @change="branchChange">
					<el-option v-for="item in branchList" :label="item.name" :value="item.org_bid">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="提交日期">
				<el-date-picker v-model="checkForm.startTime" type="date" placeholder="选择日期" @change="dateFormatStartTime">
				</el-date-picker>
				-
				<el-date-picker v-model="checkForm.endTime" type="date" placeholder="选择日期" @change="dateFormatEndTime">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm(checkForm)" :loading="submitLoading">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="newBuild" v-if="month.add">新建</el-button>
			</el-form-item>
		</el-form>
		<template v-if="role31">
			<el-table border v-loading.body="isLoading" :data="tableData.data" height="380" style="width: 100%;text-align: center">
				<el-table-column label="序号" min-width="80" width="80">
					<template scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column prop="branchId" align="center" label="分公司" min-width="150px">
					<template scope="scope">
						<span v-if="scope.row.branchId == 3">北京市市辖区公司</span>
						<span v-if="scope.row.branchId == 6">河南安阳市公司</span>
						<span v-if="scope.row.branchId == 9">浙江杭州市公司</span>
						<span v-if="scope.row.branchId == 13">福建厦门公司</span>
						<span v-if="scope.row.branchId == 17">四川成都公司</span>
						<span v-if="scope.row.branchId == 21">湖南长沙公司</span>
						<span v-if="scope.row.branchId == 25">江苏南京公司</span>
						<span v-if="scope.row.branchId == 33">吉林长春公司</span>
						<span v-if="scope.row.branchId == 37">辽宁沈阳公司</span>
						<span v-if="scope.row.branchId == 41">山东济南公司</span>
						<span v-if="scope.row.branchId == 44">黑龙江哈尔滨公司</span>
						<span v-if="scope.row.branchId == 48">广东广州公司</span>
						<span v-if="scope.row.branchId == 50">河北石家庄公司</span>
						<span v-if="scope.row.branchId == 52">新疆乌鲁木齐公司</span>
						<span v-if="scope.row.branchId == 54">天津市辖区公司</span>
						<span v-if="scope.row.branchId == 55">河南郑州市公司</span>
						<span v-if="scope.row.branchId == 57">江西南昌公司</span>
						<span v-if="scope.row.branchId == 59">上海辖区公司</span>
						<span v-if="scope.row.branchId == 61">湖北武汉公司</span>
						<span v-if="scope.row.branchId == 62">广东深圳公司</span>
						<span v-if="scope.row.branchId == 64">重庆辖区公司</span>
						<span v-if="scope.row.branchId == 66">安徽合肥公司</span>
					</template>
				</el-table-column>
				<el-table-column prop="operate" align="center" label="操作人" min-width="100px"></el-table-column>
				<el-table-column prop="targetList" align="center" label="项目内容" min-width="200px">
					<template scope="scope">
						<span v-for="(ind,key) in scope.row.targetList">
							<i v-if="key == scope.row.targetList.length - 1" style="font-style: normal">{{ ind }}</i>
							<i v-else style="font-style: normal">{{ ind }}，</i>
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="time" align="center" label="提交日期" min-width="150px"></el-table-column>
				<el-table-column prop="action" align="center" label="操作" min-width="160px" fixed="right">
					<template scope="scope">
						<el-button @click="modMonth(scope.row)" type="text" v-if="month.edit">修改</el-button>
						<el-button @click="delMonth(scope.row)" type="text" v-if="month.delete">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!--分页-->
			<el-pagination v-if="totalSize" @current-change="handleCurrentChange" :page-size="pageSize" layout="total,prev, pager, next" :total="totalSize" style="padding-top:10px;text-align: right;">
			</el-pagination>
			<!--修改新增-->
			<el-dialog :title="title" v-loading.body="isLoading" v-model="dialoDetail" top="5%" size="large" class="detail-info">
				<h3 style="color: #f23030;" v-if="modHint">注：修改任务后，各大区经理提交日报时，需要重新填写月度目标！</h3>
				<el-form :model="checkForm" ref="checkForm" class="demo-form-inline">
					<el-form-item label="选择分公司">
						<el-select v-model="checkForm.branch1" filterable :disabled="dis" clearable placeholder="分公司" @change="branchChange2">
							<el-option v-for="item in branchList" :label="item.name" :value="item.org_bid">
							</el-option>
						</el-select>
					</el-form-item><br>
					<el-form-item>
						<div class="monthClass">
							<h4 class="monthClassName">一级分类</h4>
							<div class="monthClassList one">
								<el-checkbox-group v-model="checkedClass" @change="classList">
									<el-checkbox v-for="ind in oneClass" :label="ind.id + ',' + ind.cateName" style="width: 140px;margin-left: 10px" class="one" @change="obtainNext">{{ ind.cateName }}
										<i class="el-icon-arrow-right classIcon" :value="ind.id" @click="nextShow"></i>
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div class="monthClass">
							<h4 class="monthClassName">二级分类</h4>
							<div class="monthClassList two">
								<el-checkbox-group v-model="checkedClass" @change="classList">
									<el-checkbox v-for="ind in twoClass" :label="ind.id + ',' + ind.cateName" style="width: 150px;margin-left: 10px" class="two" @change="obtainNext">{{ ind.cateName }}
										<i class="el-icon-arrow-right classIcon" :value="ind.id" @click="nextShow"></i>
									</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div class="monthClass">
							<h4 class="monthClassName">三级分类</h4>
							<div class="monthClassList">
								<el-checkbox-group v-model="checkedClass" @change="classList">
									<el-checkbox v-for="ind in threeClass" :label="ind.id + ',' + ind.cateName" style="width: 150px;margin-left: 10px">{{ ind.cateName }}</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div class="monthClass">
							<h4 class="monthClassName">其他分类</h4>
							<div class="monthClassList">
								<el-checkbox-group v-model="checkedClass" @change="classList">
									<el-checkbox v-for="ind in otherClass" :label="ind.id + ',' + ind.cateName" style="width: 150px;margin-left: 10px">{{ ind.cateName }}</el-checkbox>
								</el-checkbox-group>
							</div>
						</div>
						<div class="form-item" style="width: 900px; height: 60px;">
							<h4 style="top: -18px;">已添加项目</h4>
							<el-tag v-for="tag in checkedName" :key="tag" :closable="true" type="gray" style="margin-right: 20px;" @close="handleClose(tag)">{{tag}}</el-tag>
						</div>
					</el-form-item>
					<el-button type="primary" @click="postForm">提交</el-button>
				</el-form>
			</el-dialog>
	</div>
</template>

<script>
import { manage } from '../../config/proxy'
// import qs from 'qs'
import myMixin from '../../components/mixins'
// import api from '../../config/settings.js'
export default {
	mixins: [myMixin],
	data() {
		return {
			checkForm: {
				branch: '',
				branch1: '',
				startTime: '',
				endTime: ''
			},
			branchId: '',
			dialog_branchId: '',
			tableData: [],
			isLoading: false,
			dialoDetail: false,
			modHint: false,
			submitLoading: false,
			_startTime: '',
			_endTime: '',
			currentPage: 0,
			pageIndex: 1,
			pageSize: 15,
			totalSize: 0,
			title: '修改',
			oneClass: [],
			twoClass: [],
			threeClass: [],
			formItem: [],
			dis: false,
			subType: 0,
			modMonthId: '',
			otherClass: [
				{
					id: 1001,
					cateName: '客户活跃情况'
				},
				{
					id: 1003,
					cateName: '销售额'
				},
				{
					id: 1002,
					cateName: '陈列情况'
				}
			],
			checkedClass: [],
			checkedName: [],
			nextClass: '',
			iconFlag: false,
			checkedFlag: false,
			temporary: [],
			isHead: false,
			_branchId: '',
			userInfoArr: ''

		}
	},
	created() {
		// 判断 是否为是否为分公司  分公司 隐藏 分公司 选项
		var userInfo = window.sessionStorage.getItem('_userInfo')
		var userInfoArr = JSON.parse(userInfo)
		this.userInfoArr = userInfoArr
		this._branchId = userInfoArr.branchId
		// console.log(userInfoArr)
		if (userInfoArr.branchId === 1) {
			this.isHead = true
		} else {
			console.log('分公司')
			this.isHead = false
			this.branchId = this._branchId
			this.checkForm.branch1 = this.userInfoArr.branchName
		}
	},
	methods: {
		// 展示下一级分类
		nextShow(val) {
			this.temporary = []
			this.iconFlag = true
			for (let i in this.checkedClass) {
				this.temporary.push(this.checkedClass[i])
			}
		},
		// 查询条件开始时间
		dateFormatStartTime(data) {
			this._startTime = data
		},
		// 查询条件结束时间
		dateFormatEndTime(data) {
			this._endTime = data
		},
		// 关闭标签
		handleClose(tag) {
			this.checkedName.splice(this.checkedName.indexOf(tag), 1)
         console.log(tag)
			for (let i in this.checkedClass) {
				if (tag === this.checkedClass[i].split(',')[1]) {
					this.checkedClass.splice(i, 1)
				}
			}
         console.log(this.checkedName)
			console.log(this.checkedClass)
		},
		// 查询分公司
		branchChange(val) {
			console.log(val)
			this.branchId = val
		},
		// 修改、新建分公司
		branchChange2(val) {
			console.log(val)
			this.dialog_branchId = val
		},
		// 获取第一级菜单
		firstClass() {
			let arg = {}
			manage.monthFirst(arg, res => {
				this.oneClass = res.data
			})
		},
		// 新建
		newBuild() {
			this.title = '新建'
			this.modHint = false
			this.dialoDetail = true
			this.subType = 1
			this.checkedClass = []
			this.checkedName = []
			this.firstClass()
			if (this.isHead === false) {
				this.dis = true
			} else {
				this.dis = false
			}
		},
		// 修改
		modMonth(val) {
			this.dialoDetail = true
			this.modHint = true
			this.title = '修改'
			this.subType = 2
			this.checkedName = []
			this.checkedClass = []
			this.dis = true
			this.firstClass()
			console.log(val)
			this.modMonthId = val.monthId
			for (let i in this.branchList) {
				if (parseInt(this.branchList[i].org_bid) === parseInt(val.branchId)) {
					this.checkForm.branch1 = this.branchList[i].name
				}
			}
			let targetArray = val.targetArray.split('-')
			let targetList = val.targetList
			for (let j in val.targetList) {
				this.checkedClass.push(targetArray[j] + ',' + targetList[j])
			}
         for (let k in this.checkedClass) {
            this.checkedName.push(this.checkedClass[k].split(',')[1])
         }
			// this.checkedName = this.checkedClass
         console.log(this.checkedName)
		},
		// 获取下一级
		obtainNext(val) {
			if (this.iconFlag) {
				this.nextClass = val.target.value
				let arg = {
					cateId: this.nextClass
				}
				manage.monthNext(arg, res => {
					if (val.target.labels[0].className.indexOf('one') !== -1) {
						this.twoClass = res.data
						this.threeClass = []
					} else if (val.target.labels[0].className.indexOf('two') !== -1) {
						this.threeClass = res.data
					}
				})
			}
		},
		// 选择分类
		classList(val) {
			if (this.iconFlag) {
				this.checkedClass = this.temporary
				this.iconFlag = false
			} else {
				if (val.length > 10) {
					val.pop()
					this.$message({
						showClose: true,
						message: '最多只能勾选10个分类',
						type: 'warning'
					})
				} else {
					this.checkedName = []
					for (let i in this.checkedClass) {
						this.checkedName.push(this.checkedClass[i].split(',')[1])
					}
				}
			}
			console.log(this.checkedClass)
		},
		// 删除
		delMonth(val) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$message({
					type: 'success',
					message: '删除成功!'
				})
				let arg = {
					monthId: val.monthId
				}
				manage.delMonth(arg, res => {
					if (res.result === 0) {
						this.submitForm(this.formItem)
					} else {
						this.$message({
							showClose: true,
							message: res.message,
							type: 'error'
						})
					}
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				})
			})
		},
		// 订单查询
		submitForm(formItem) {
			this.formItem = formItem
			this.isLoading = true
			this.submitLoading = true
			let arg = {
				startTime: this._startTime,
				endTime: this._endTime,
				branchId: this.branchId,
				pageSize: this.pageSize,
				pageIndex: this.pageIndex - 1
			}
			manage.monthList(arg, res => {
				console.log(res)
				if (res.result === 0) {
					setTimeout(() => {
						this.isLoading = false
						this.submitLoading = false
					}, 500)
					this.totalSize = res.count
					this.tableData = res
				} else {
					this.$message({
						showClose: true,
						message: res.message,
						type: 'error'
					})
					setTimeout(() => {
						this.isLoading = false
						this.submitLoading = false
					}, 800)
				}
			})
			// let data = {
			// 	areaId: '168',
			// 	branchId: '9',
			// 	storeId: '181',
			// 	startDate: '2017-01-01',
			// 	endDate: '2017-12-31',
			// 	limit: '1',
			// 	offis: '10'
			// }
			// dms.ygjx_query(data, res => {
			// 	console.log('员工绩效')
			// 	console.log(res)
			// })
			// dms.ddps_query(data, res => {
			// 	console.log('订单配送')
			// 	console.log(res)
			// })
			// dms.dcc_query(data, res => {
			// 	console.log('单车次明细')
			// 	console.log(res)
			// })
			// dms.dcc_detail(data, res => {
			// 	console.log('单车次查询')
			// 	console.log(res)
			// })
		},
		// 新建提交
		addPost() {
			if (!this.checkForm.branch1) {
				this.$message({
					showClose: true,
					message: '请选择分公司',
					type: 'warning'
				})
			} else if (this.checkedClass.length === 0) {
				this.$message({
					showClose: true,
					message: '请选择分类',
					type: 'warning'
				})
			} else {
				let userId = ''
				let userName = ''
				let target = []
				let targetArray = []
				for (let i in this.checkedClass) {
					target[i] = this.checkedClass[i].split(',')[0]
				}
				targetArray = target.join('-')
				let userInfo = window.sessionStorage.getItem('_userInfo')
				userId = JSON.parse(userInfo).user_id
				userName = JSON.parse(userInfo).user_name
				let arg = {
					userId: userId,
					branchId: this.isHead === true ? this.checkForm.branch1 : this.branchId,
					userName: userName,
					targetArray: targetArray
				}
				console.log(arg)
				manage.addMonth(arg, res => {
					if (res.result === 0) {
						this.dialoDetail = false
						this.submitForm(this.formItem)
					} else {
						this.$message({
							showClose: true,
							message: res.message,
							type: 'error'
						})
					}
				})
			}
		},
		// 修改提交
		modPost() {
			if (this.checkedClass.length === 0) {
				this.$message({
					showClose: true,
					message: '请选择分类',
					type: 'warning'
				})
			} else {
				let userId = ''
				let userName = ''
				let target = []
				let targetArray = []
				for (let i in this.checkedClass) {
					target[i] = this.checkedClass[i].split(',')[0]
				}
				targetArray = target.join('-')
				let userInfo = window.sessionStorage.getItem('_userInfo')
				userId = JSON.parse(userInfo).user_id
				userName = JSON.parse(userInfo).user_name
				let arg = {
					userId: userId,
					monthId: this.modMonthId,
					userName: userName,
					targetArray: targetArray
				}
				manage.modMonth(arg, res => {
					if (res.result === 0) {
						this.dialoDetail = false
						this.submitForm(this.formItem)
					} else {
						this.$message({
							showClose: true,
							message: res.message,
							type: 'error'
						})
					}
				})
			}
		},
		postForm() {
			if (this.subType === 1) {
				this.addPost()
			}
			if (this.subType === 2) {
				this.modPost()
			}
		},
		handleCurrentChange(val) {
			console.log(val)
			this.isLoading = true
			this.submitLoading = true
			let arg = {
				startTime: this._startTime,
				endTime: this._endTime,
				branchId: this.branchId,
				pageSize: this.pageSize,
				pageIndex: val - 1
			}
			manage.monthList(arg, res => {
				console.log(res)
				if (res.result === 0) {
					setTimeout(() => {
						this.isLoading = false
						this.submitLoading = false
					}, 500)
					this.totalSize = res.count
					this.tableData = res
				} else {
					this.$message({
						showClose: true,
						message: res.message,
						type: 'error'
					})
					setTimeout(() => {
						this.isLoading = false
						this.submitLoading = false
					}, 800)
				}
			})
		}
	}
}
</script>
<style>
.payList1 {
	margin-bottom: 15px;
}

.line-x {
	border-top: 1px solid #f2f2f2;
	margin-bottom: 15px;
}

.el-checkbox__label {
	padding-left: 15px;
}

.monthClass {
	margin-right: 50px;
	width: 200px;
	height: 350px;
	border: 1px solid #eaeefb;
	border-radius: 5px;
}

.monthClassName {
	height: 35px;
	margin: 0;
	text-align: center;
	border-bottom: 1px solid #eaeefb;
}

.monthClassList {
	overflow-y: auto;
	overflow-x: hidden;
	height: 315px;
	width: 190px;
	margin-left: 10px;
}

.classIcon {
	position: absolute;
	top: 11px;
	right: -14px;
}
</style>
